<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Fish Bone</h2>
    <div class="demo-1 live-demo">
        <h3>左边 白色</h3>
        <j-fish-bone [data]="data"></j-fish-bone>
    </div>
    <div class="demo-2 live-demo">
        <h3>右边 黑色</h3>
        <j-fish-bone [data]="data2" direction="right" theme="dark" ></j-fish-bone>
    </div>
    <div class="demo-3 live-demo">
        <h3>实用场景</h3>
        <jigsaw-select labelField="label"
                       [(value)]="selectedScene"
                       [data]="sceneData"
                       (valueChange)="changeData($event)">
        </jigsaw-select>
        <j-fish-bone class="custom-pie-bone" [data]="data3"></j-fish-bone>
    </div>
</div>
